﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        body {
            height: 100%;
            background-color:black;
        }
        .PicList {
            width: 1500px;
        }
        .PicItem {
            width: 150px;
            height: 150px;
            background-color: blue;
            margin:10px 0px;
        }
        .PicItem1 {
            width: 150px;
            height: 0px;
            margin: 10px 0px;
        }
    </style>
</head>
<body style="overflow-y:hidden">
    <!--<button style="height: 100px; position: absolute;z-index:3" onclick="Move()">按钮</button>-->
    <div class="PicList" style="position: absolute; bottom: 213px; left: 117px ">
        <div class="PicItem"></div>
        <div class="PicItem"></div>
        <div class="PicItem"></div>
        <div class="PicItem"></div>
        <div class="PicItem"></div>
    </div>
    <div style="width: 1500px;position:absolute;bottom:173px;z-index:-1;">
        <img src="img/打印机头.png" style="width:25%" />
    </div>
    <div style="width: 1500px; position: absolute; bottom: 0;">
        <img src="img/打印机.png" style="width:25%" />
    </div>
    <script>
        // 封装函数
        // 添加定时器
        function animate(obj, step, endNum, callback) {

            var stepNum = step;
            obj.timer = setInterval(function () {
                obj.style.height = (obj.offsetHeight + step) + "px";
                if (step > 0) {
                    if (obj.offsetHeight >= endNum) {
                        clearInterval(obj.timer);
                        callback();
                    }
                } else {
                    if (obj.offsetHeight <= endNum) {
                        clearInterval(obj.timer);
                        callback();
                    }
                }
                stepNum = stepNum + step;
            }, 12);
        }
        function Move(url) {
            var divspan = document.getElementsByClassName('PicList')[0];
            var div = document.createElement('div');
            div.className = "PicItem1";
            if (url) {
                div.innerHTML = " <img src=" + url + " style='width:100%' />";
            } else {
                div.innerHTML = " <img src='img/打印机.png' style='width:100%' />";
            }
            divspan.appendChild(div);
            var divitem = divspan.children[0];
            animate(div, 2, 150, function () {
                divspan.removeChild(divitem);
            });
        }
        function RetColor() {
            for (var i = 0; i < document.getElementsByClassName('PicList')[0].children.length; i++) {
                document.getElementsByClassName('PicList')[0].children[i].className = 'PicItem1';
            }
        }
    </script>
</body>
</html>